<template>
  <div>
    <el-row>
      <el-col>
        <div id="Perception" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts');
  echarts.dataTool = require("echarts/extension/dataTool");
  export default {
    data() {
      return {
        isShow: false,
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('Perception'));
        /*        var option = {
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    backgroundColor: 'rgba(0, 76, 152, .6)',
                    borderColor: '#035699',
                    borderWidth: 1,
                  },
                  grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    top: '12%',
                    containLabel: true
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: 12
                  },
                  xAxis: [{
                    type: 'category',
                    data: ['糖尿病诊断与分型', '糖尿病初诊用药', '糖尿病长期管理', '糖尿病并发症管理'],
                    axisTick: {
                      alignWithLabel: true
                    },
                    /!*坐标颜色*!/
                    axisLine: {
                      lineStyle: {
                        color: '#2faef5',
                        width: 2
                      }
                    }
                  }],
                  yAxis: [{
                    type: 'value',
                    /!*坐标颜色*!/
                    axisLine: {
                      lineStyle: {
                        color: '#2faef5',
                        width: 2
                      }
                    },
                    /!*网络线*!/
                    splitLine: {

                      show: true,

                      lineStyle: {

                        color: '#483d8b',

                        type: 'dashed',

                        width: 1

                      }

                    }
                  }],
                  series: [{
                    name: '',
                    type: 'bar',
                    color: ['#04a5f9'],
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top'
                        },
                        /!*柱状渐变*!/
                        color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1, [{
                            offset: 0,
                            color: '#9dcb7e'
                          },
                            {
                              offset: 0.5,
                              color: '#9dcb7e'
                            },
                            {
                              offset: 1,
                              color: '#008099'
                            }
                          ]
                        )
                      }
                    },
                    barWidth: '20%',
                    data: [65, 55, 100, 30]
                  }]
                };*/

        var data1 = echarts.dataTool.prepareBoxplotData([
          [3,9],[2,8],[1,9],[4,7]
        ]);
        var option = {
          title: [
            {
              text: '',
              left: 'center',
            },
          ],
          legend: {
            data: ['line', 'line2', 'line3']
          },
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          xAxis: {
            type: 'category',
            data: ['机会性筛查', '肺部疾病史', '新辅助化疗', '免疫疗法',],
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitArea: {
              show: true
            }
          },
          series: [
            {
              name: 'boxplot',
              type: 'boxplot',
              data: data1.boxData,
            },
            {
              name: '机会性筛查',
              type: 'scatter',
              data: [
                [0, 8.2, "机会性筛查"],
              ],
            },
            {
              name: '肺部疾病史',
              type: 'scatter',
              data: [
                [1, 8, "肺部疾病史"],
              ],
            },
            {
              name: '新辅助化疗',
              type: 'scatter',
              data: [
                [2, 6, "新辅助化疗"],
              ],
            },
            {
              name: '免疫疗法',
              type: 'scatter',
              data: [
                [3, 7, "免疫疗法"],
              ],
            }
          ]
        };

        myChart.setOption(option);

      }
    }
  }
</script>

<style scoped>

</style>
